<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>主页</title>
    <link th:href="@{/js/el/index.css}" rel="stylesheet"  type="text/css"/>
    <script th:src="@{/js/vue.js}" type="text/javascript"></script>
    <script th:src="@{/js/el/index.js}" type="text/javascript"></script>
    <script th:src="@{/js/axios.js}" type="text/javascript"></script>
</head>
<body>
<div id="app">
    <div th:include= "~{common/head_head::head}"></div>
    <div style="display: flex; width: 100%; height: 45vw;">
        <div style="width: 20vw; border: 1px solid #ffc0ff;">
            <h2 style="background-color: #3a8ee6;text-align: center; margin: 0;padding: 0;">科技改变世界</h2>
            <ul v-for="t in types">
                <li><el-link @click="findBook(t.id)">{{t.typename}}>></el-link></li><hr>
            </ul>
        </div>
        <div style="width: 5px;"></div>
        <div style="width: 90vw; border: 1px solid #0000ff;">
            <h2 style="background-color: #3a8ee6;margin: 0;">
                {{typett}}
                <div style="float: right">
                    <input type="text" v-model="titlename" placeholder="搜索标题">
                    <button @click="findBuName()">搜索</button>
                </div>
            </h2>

            <el-collapse v-if="aath == 0" v-for="(b,id) in book">
                <el-collapse-item :title="b.title" :name="id">
                    <p>&nbsp;&nbsp;&nbsp;&nbsp;摘要：{{b.matter}} . . .
                        <el-link @click="findMatter(b.detaid)">阅读更多</el-link>
                        <!--<button @click="findMatter(b.detaid)">阅读更多</button>-->
                    </p>
                    <div style="text-align: right">
                        <a>{{b.timedate}}</a>
                        <a>作者：{{b.uid}}</a>
                        <a>[评论:0][阅读:{{b.read}}]</a>
                    </div>
                </el-collapse-item>
            </el-collapse>

            <div id="blog" v-if="aath != 0" style="width: 80vw; height: 93%; overflow: auto;">

            </div>
        </div>
    </div>
</div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{

            drawer:false,
            aath:0,
            drawer:false,
            titlename:"",
            typett:"博客时代",
            types:[],
            book:[],
        },
        methods:{
            findBook(id){
                var than = this;
                this.aath = 0;
                //this.typett = this.types[0].typename;
                // console.log(this.types[0].typename)
                axios.get("/api/fore/findByType/"+id)
                    .then(function (resp) {
                        // console.log(resp.data.data)
                        than.book = resp.data.data
                    })
            },
            findMatter(bid){
                this.aath = 1;
                axios.get("/api/fore/findById/"+bid)
                    .then(function (resp) {
                        document.getElementById("blog").innerHTML = resp.data.data.details;
                    })
            },
            findBuName(){
                var than = this;
                this.aath = 0;
                axios.get("/api/fore/findBy/"+this.titlename)
                    .then(function (resp) {
                        than.book = resp.data.data
                    })
            }
        },
        mounted(){
            var than = this;
            axios.get("/api/fore/findType")
                .then(function (resp) {
                    than.types = resp.data.data;
                    var thbn = than;
                    axios.get("/api/fore/findByType/6242c0138270000065007327")
                        .then(function (resp) {
                            // console.log(resp.data.data)
                            thbn.bokes = resp.data.data
                        })
                })

        }
    })
</script>
</html>
